<script setup lang="ts">
import { TableColumnType, Modal } from 'ant-design-vue'
import type { TableProps } from 'ant-design-vue'
import { getShopList, unbindShop, getAuthUri } from '@/api/shop'
import { onMounted, unref } from 'vue'
import { usePagination } from '@/utils/hooks'
import { handleApi } from '@/utils/alert'
import ShopTableForm from './shop-table-form.vue'
import { ShopOutlined } from '@ant-design/icons-vue'


const { dataSource, pagination, fetch, params, loading } = usePagination(getShopList, handleApi)

const cols: (TableColumnType & DataIndex<IShop>)[] = [
  { key: 'id', dataIndex: 'shop_id', title: '店铺ID' },
  { key: 'logo', dataIndex: 'shop_logo', title: '店铺LOGO' },
  { key: 'name', dataIndex: 'shop_name', title: '店铺名称' },
  { key: 'status', title: '状态' },
  { key: 'created_at', dataIndex: 'create_time', title: '创建时间' },
  { key: 'end_time', dataIndex: 'end_time', title: '服务到期时间' },
  { key: 'opt', title: '操作' }
]

onMounted(() => {
  fetch()
})

const onTableChange: TableProps['onChange'] = (pg) => {
  params.value.page = pg.current
  params.value.pagesize = pg.pageSize
  fetch()


}

const formSubmit = (p: PaginateQuery<IShop>) => {
  params.value = { ...unref(params), ...p }
  fetch()
}


const now = new Date().getTime()
const getStatusColor = (item: IShop) => new Date(item.end_time).getTime() > now ? 'green' : 'red'
const getStatusText = (item: IShop) => new Date(item.end_time).getTime() > now ? '正常' : '已过期'

// 取消绑定
const unbind = async (item: IShop) => {
  const res = await unbindShop(item.shop_id).catch(handleApi)
  if (res && res.code === 1) {
    fetch()
  }
}

// 绑定店铺或续费
const bindOrRenew = async () => {
  const res = await getAuthUri().catch(handleApi)
  if (res && res.code && res.data) {
    Modal.confirm({
      title: '店铺绑定或续费是否成功?',
      onOk: () => fetch()
    })
    window.open(res.data, '_blank')
  }
}

</script>

<template>
  <div class="px-4 py-8">
    <ShopTableForm @submit="formSubmit" @button="bindOrRenew"></ShopTableForm>
  </div>
  <ATable :columns="cols" :data-source="dataSource" :loading="loading" :pagination="pagination" @change="onTableChange">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'logo'">

        <AAvatar :src="record.shop_logo" shape="square" :size="40" v-if="record.shop_logo"></AAvatar>
        <div class="size-[40px] rounded-[8px] flex justify-center items-center bg-gray-100 text-[30px] text-orange-500" v-else>
          <ShopOutlined />
        </div>
      </template>

      <template v-if="column.key === 'status'">
        <ATag :color="getStatusColor(record as IShop)">{{ getStatusText(record as IShop) }}</ATag>
      </template>

      <template v-if="column.key === 'opt'">
        <div class="flex flex-col">
          <AButton type="link" @click="bindOrRenew">续费</AButton>
          <APopconfirm
            title="确定要取消绑定吗?"
            @confirm="unbind(record as IShop)"
            ok-text="确定"
            cancel-text="取消"
          >
            <AButton type="link" danger>取消绑定</AButton>
          </APopconfirm>
        </div>
      </template>
    </template>
  </ATable>
</template>